import React from 'react'
import './Menu.scss'
import {
  getListData,
  itemClick,
  addSelectTime,
  minusSelectTime,
  showChooseContent
} from '../actions/menuAction'

import { connect } from 'react-redux'
class Menu extends React.Component {
  constructor(props) {
    super(props)
    this.props.dispatch(getListData())
  }
  itemClick(index) {
    this.props.dispatch(
      itemClick({
        currentLeftIndex: index
      })
    )
  }
  addClick(index) {
    this.props.dispatch(
      addSelectTime({
        index: index
      })
    )
  }
  minusClick(index) {
    this.props.dispatch(
      minusSelectTime({
        index: index
      })
    )
  }
  renderLeft() {
    let list = this.props.listData.food_spu_tags || []
    return list.map((ele, index) => {
      let cls =
        index === this.props.currentLeftIndex
          ? 'left-item current'
          : 'left-item'
      return (
        <div
          className={cls}
          key={index}
          onClick={() => {
            this.itemClick(index)
          }}
        >
          <div className="item-text">
            {ele.icon ? <img className="item-icon" src={ele.icon} /> : null}
            {ele.name}
          </div>
        </div>
      )
    })
  }
  renderRight() {
    let index = this.props.currentLeftIndex
    let _data = this.props.listData.food_spu_tags || []
    let currentItem = _data[index] || {}
    let _spus = currentItem.spus || []
    return (
      <div className="right-content">
        <p className="right-title">{currentItem.name}</p>
        <div className="right-list">{this.renderRightList(_spus)}</div>
      </div>
    )
  }

  // 加载右侧列表
  renderRightList(list) {
    return list.map((ele, index) => {
      if (!ele.chooseCount) {
        ele.chooseCount = 0
      }
      return (
        <div className="list-item" key={index}>
          <div className="item-left">
            <img className="item-pic" src={ele.picture} alt="" />
          </div>
          <div className="item-right">
            <div className="food-name">{ele.name}</div>
            <div className="food-detail two-line">{ele.description}</div>
            <div className="food-zan">{ele.praise_content}</div>
            <div className="food-price">
              ￥{ele.min_price}
              <span className="num">{ele.unit}</span>
            </div>
            <div className="car">
              {ele.chooseCount > 0 ? (
                <div
                  className="minus"
                  onClick={() => {
                    this.minusClick(index)
                  }}
                />
              ) : null}
              {ele.chooseCount > 0 ? (
                <span className="car-count">{ele.chooseCount}</span>
              ) : null}
              <div
                className="add"
                onClick={() => {
                  this.addClick(index)
                }}
              />
            </div>
          </div>
        </div>
      )
    })
  }
  countMoney() {
    let _list = this.props.listData.food_spu_tags || []
    let count = 0
    let totalMoney = 0
    let chooseFood = []
    for (var i = 0; i < _list.length; i++) {
      for (var j = 0; j < _list[i].spus.length; j++) {
        if (_list[i].spus[j].chooseCount > 0) {
          count += _list[i].spus[j].chooseCount
          totalMoney +=
            _list[i].spus[j].chooseCount * _list[i].spus[j].min_price
          chooseFood.push(_list[i].spus[j])
        }
      }
    }
    return {
      count,
      totalMoney,
      chooseFood
    }
  }
  showChoose() {
    this.props.dispatch(
      showChooseContent({
        showChoose: !this.props.showChoose
      })
    )
  }
  renderCarList(list) {
    let _list = list
    return _list.map((ele, index) => {
      return (
        <div className="car-list-item" key={index}>
          <div className="item-name">{ele.name}</div>
          <div className="item-price">{ele.min_price}</div>
          <div className="item-handel">
            <div className="car">
                <div
                  className="minus"
                  onClick={() => {
                    this.minusClick(index)
                  }}
                />
                <span className="car-count">{ele.chooseCount}</span>
              <div
                className="add"
                onClick={() => {
                  this.addClick(index)
                }}
              />
            </div>
          </div>
        </div>
      )
    })
  }
  render() {
    return (
      <div className="menu-inner">
        <div className="left-bar">
          <div className="left-bar-inner">{this.renderLeft()}</div>
        </div>
        <div className="right-bar">{this.renderRight()}</div>
        <div className="bottom-bar">
          {this.props.showChoose ? (
            <div className="choose-content">
              <div className="clear-car">
                <div className="clear-car-right">清空购物车</div>
              </div>
              <div className="car-list">
                {this.renderCarList(this.countMoney().chooseFood)}
              </div>
            </div>
          ) : null}

          <div className="total-money">
            <div
              className="car-img"
              onClick={() => {
                this.showChoose()
              }}
            >
              {this.countMoney().count ? (
                <div className="dot">{this.countMoney().count}</div>
              ) : null}
            </div>
            <div className="car-detail">
              <div className="money">￥{this.countMoney().totalMoney}</div>
              <div className="other">另需配送￥10</div>
            </div>
            <div className="go-pay">去结算</div>
          </div>
        </div>
      </div>
    )
  }
}
export default connect(state => ({
  listData: state.menuReducer.listData,
  currentLeftIndex: state.menuReducer.currentLeftIndex,
  showChoose: state.menuReducer.showChoose
}))(Menu)
